---
title: "Box Sizing"
description: "控制浏览器如何计算元素的总大小的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/boxSizing'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Include borders and padding -->
## 包括边框和内边距

<!-- Use `box-border` to set an element's `box-sizing` to `border-box`, telling the browser to include the element's borders and padding when you give it a height or width. -->
使用 `box-border` 将元素的 `box-sizing` 设置为 `border-box`，告诉浏览器，当您给它一个高度或宽度时，它将包括元素的边框和内边距。

<!-- This means a 100px &times; 100px element with a 2px border and 4px of padding on all sides will be rendered as 100px &times; 100px, with an internal content area of 88px &times; 88px. -->
这意味着一个 100px &times; 100px 的元素，边框为 2px，四边有 4px 的内边距，将渲染为 100px &times; 100px，内部内容区域为 88px &times; 88px。

<!-- Tailwind makes this the default for all elements in our [preflight base styles](/docs/preflight). -->
Tailwind 在 [preflight基础样式](/docs/preflight) 中针对所有元素把这做为默认设置。

```html lightBlue
<template preview>
  <div class="flex items-center justify-around">
    <div class="box-border h-32 w-32 p-4 border-4 border-light-blue-400 bg-light-blue-200 rounded-md">
      <div class="h-full w-full bg-light-blue-400 bg-stripes bg-stripes-white"></div>
    </div>
  </div>
</template>

<div class="**box-border** h-32 w-32 p-4 border-4 ...">
  <!-- ... -->
</div>
```

<!-- ## Exclude borders and padding -->
## 不包括边框和内边距

<!-- Use `box-content` to set an element's `box-sizing` to `content-box`, telling the browser to add borders and padding on top of the element's specified width or height. -->
使用 `box-content` 将元素的 `box-sizing` 设置为 `content-box`，告诉浏览器在元素的指定宽度或高度的基础上添加边框和内边距。

<!-- This means a 100px &times; 100px element with a 2px border and 4px of padding on all sides will actually be rendered as 112px &times; 112px, with an internal content area of 100px &times; 100px. -->
这意味着一个 100px &times; 100px 的元素，如果有 2px 的边框，四边有 4px 的内边距，实际上会渲染为 112px &times; 112px，内部内容区域为 100px &times; 100px。

```html emerald
<template preview>
  <div class="flex items-center justify-around">
    <div class="box-content h-32 w-32 p-4 border-4 border-emerald-400 bg-emerald-200 rounded-md">
      <div class="h-full w-full bg-emerald-400 bg-stripes bg-stripes-white"></div>
    </div>
  </div>
</template>

<div class="**box-content** h-32 w-32 p-4 border-4 ...">
  <!-- ... -->
</div>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the box-sizing at a specific breakpoint, add a `{screen}:` prefix to any existing box-sizing utility. For example, use `md:box-content` to apply the `box-content` utility at only medium screen sizes and above. -->
要控制特定断点处的 box-sizing，可为任何现有的 box-sizing 功能类添加 `{screen}:` 前缀。例如，使用 `md:box-content` 只给中等以上的屏幕尺寸应用 `box-content` 功能类。

```html
<div class="box-border **md:box-content** ...">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 变体

<Variants plugin="boxSizing" name="box-sizing" />

### 禁用

<Disabling plugin="boxSizing" name="box-sizing" />
